<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        .aui-grid [class*=aui-col-xs-]:active{
           background-color: transparent;
        }
        .moreSection{
          width: 100%;
          background: url(../../image/main/wallet@2x.png) no-repeat center;
          background-size: 100% 100%;
          margin-top: 8px;
        }
        .userPhoto{
          width: 81px;
          height: 81px;
          border-radius: 50%;
          margin: 0 auto;
        }
        .userInfonSection{
           margin-top: 30px;
        }
        .userInfonSection p{
           text-align:center;
        }
        .firstP{
          line-height: 18px;
          font-size: 17px;
          color: #969696;
          margin: 6px 0 14px 0;
        }
        .lastP{
           font-size: 30px;
           color:#141414;
           line-height: 28px;
           font-family: sans-serif;
           font-weight: bold;
        }
        .stars{
          display: inline-block;
          width: 9px;
        }
        .balanceStats{
           margin-top: 39px;
           background-color: transparent;
        }
        .balanceStats .firstP{
              margin: 6px 0 8px 0;
        }
       .balanceStats .balance{
          text-align: left;
          text-indent: 28px;
        }
        .balanceStats .balanceRight{
          text-align: right;
          padding-right: 28px;
         }
        .balance{
          color: #141414;
          font-size: 17px;
          font-family: sans-serif;
          font-weight: bold;
        }
        .walletOpreat .userPhoto{
           width: 53px;
           height: 53px;
        }
        .walletOpreat .firstP{
          color: #141414;
        }
        .walletOpreat .userInfonSection:first-child{
              margin-top: 59px;
        }
        .walletOpreat .userInfonSection:last-child{
          margin-top: 58px;
        }
        /*适配屏幕320px*/
        @media (max-width: 320px){
          .msgBtn{
            width: 16px;
            margin: 15px 0 9px 12px;
          }
          .userPhoto{
            width: 54px;
            height: 54px;
          }
          .firstP{
            font-size: 12px;
            margin: 4px 0 0px 0;
          }
          .lastP{
            font-size: 10px
          }
          .walletOpreat .userInfonSection:first-child{
            margin-top: 41px;
          }
          .walletOpreat .userInfonSection:last-child{
            margin-top: 39px;
          }
          .walletOpreat .userPhoto{
            width: 35px;
            height: 35px;
          }
          .balanceStats .balance{
            text-indent: 32px;
          }
          .balanceStats .firstP{
            margin: 6px 0 3px 0;
          }
          .balanceStats .balanceRight{
            padding-right: 32px;
          }
          .walletOpreat .firstP,
          .balanceStats .balance{
            font-size: 12px;
          }
          .accountBalance{
            font-size: 20px;
          }
        }
        /*#actionSheet-mask2{
          width: 100%;
          position: fixed;
          left: 0px;
          top: 0px;
          z-index: 10;
          background: rgba(0, 0, 0, 0.3);
        }
        .actionSheet{
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          background: #fff;
          border-radius: 15px 15px 0 0;
        }
        .slides-enter-active, .slides-leave-active {
          transition: opacity .3s;
        }
        .slides-enter, .slides-leave-to  {
          opacity: 0;
        }
        .slidesLeft-enter-active {
          transition: all .3s ease;
        }
        .slidesLeft-leave-active {
          transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slidesLeft-enter, .slidesLeft-leave-to {
          transform: translateY(300px);
        }*/
    </style>
</head>

<body>
    <div class="moreSection" id="moreSection" v-bind:style="{height:wHeight}" >
       <div class="userInfonSection">
             <p class="firstP">余额账户(元)</p>
             <p class="lastP accountBalance">8,952.00</p>
       </div>
       <section class="aui-grid balanceStats" >
                  <div class="aui-row">
                      <div class="aui-col-xs-5">
                          <div class="aui-grid-label">
                            <p class="firstP">可用资金(元)</p>
                            <p class="balance">{{balance}}</p>
                          </div>
                      </div>
                      <div class="aui-col-xs-2">
                          <div class="aui-grid-label"></div>
                      </div>
                      <div class="aui-col-xs-5">
                          <div class="aui-grid-label">
                            <p class="firstP">冻结资金(元)</p>
                            <p class="balance balanceRight">{{disBalance}}</p>
                          </div>
                      </div>
                  </div>
       </section>
       <div class="walletOpreat">
         <div class="userInfonSection">
                   <img class="userPhoto" src="../../image/main/chongzhi@2x.png"  @click="showRecharge()">
                   <p class="firstP">充值</p>
         </div>
         <div class="userInfonSection">
               <img class="userPhoto" src="../../image/main/tixian@2x.png"  @click="showCash()">
               <p class="firstP">提现</p>
         </div>
     </div>
     <!-- <transition name="slides">
         <div class="actionSheet-mask" id="actionSheet-mask2" v-bind:style="{height:wHeight}" v-if="showMask1" @click.self="hidUserSection()">
          </div>
       </transition>
       <transition name="slidesLeft">
           <ul class="aui-list aui-form-list  actionSheet" v-if="showMask1">
                 <li class="aui-list-item">
                     <div class="aui-list-item-label  color-orange colorGery">
                         取消
                     </div>
                     <div class="aui-list-item-label aui-margin-r-15" style="width: 8rem;padding-right: 0;">
                         <div class="aui-btn aui-btn-info getVilidCode" style="width: 8rem;color:#969696!important">
                         </div>
                     </div>
                 </li>
           </ul>
     </transition> -->
   </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
       api.parseTapmode();
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    ////初始化页面
    var app = new Vue({
        el: '#moreSection',
        data: {
            wHeight: '',
            balance : "7,500.00",
            disBalance : "1452.00",
            showMask1 : false,
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh-50) + 'px';
            },
            gotoComment : function(){
              bf_common_view.bf_win.openWin('userComment', '../main/');
            },
            //////打开充值部分
            showRecharge : function(){
               //this.showMask1 = !this.showMask1;
               api.openFrame({
                   name: 'walleRecharge_frame',
                   url: './walleRecharge_frame.html',
                   rect: {
                       x: 0,
                       y: 0,
                       w: 'auto',
                       h: 'auto'
                   },
                   animation: {
                      type:"movein",
                      subType:"from_bottom",
                      duration:200
                   }
               });
            },
            ////打开提现部分
            showCash : function(){
              api.openFrame({
                  name: 'walleCash_frame',
                  url: './walleCash_frame.html',
                  rect: {
                      x: 0,
                      y: 0,
                      w: 'auto',
                      h: 'auto'
                  },
                  animation: {
                     type:"movein",
                     subType:"from_bottom",
                     duration:200
                  }
              });
            },
            hidUserSection : function(){
               this.showMask1 = false;
            },
        },

    });
    var mainPageMethod = {

    };
    app.init();
</script>

</html>
